<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音搜索</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="container">
        <div class="instruction">
            说明：输入要查询的文字或者 ID（优先使用），找到对应音频后可以在线播放、下载。<br>
            <span class="warning">注意：同一时间不支持多人同时操作。</span>
        </div>
        <div class="search-box">
            <input type="text" id="searchId" placeholder="请输入ID（数字, 字母(大小写), 横线, 下划线）" class="id-input">
            <textarea id="searchInput" placeholder="请输入搜索内容，不超过 100 个字" rows="5"></textarea>
            <div class="button-group">
                <button id="searchBtn">搜索</button>
                <button id="clearBtn" class="clear-btn">清除</button>
            </div>
        </div>

        <div id="loadingIndicator" class="loading-indicator" style="display: none;">
            <div class="spinner"></div>
            <p>处理中，请稍候...</p>
        </div>

        <div id="audioList" class="audio-list" style="display: none;">
        </div>

        <template id="audioItemTemplate">
            <div class="audio-item">
                <div class="filename">文件名：</div>
                <div class="controls-container">
                    <audio controls>
                        您的浏览器不支持音频播放
                    </audio>
                    <a class="download-btn" download>下载音频</a>
                </div>
            </div>
        </template>

        <div id="errorMessage" class="error-message" style="display: none;">
            未找到相关音频
        </div>
    </div>
    <script src="/static/main.js"></script>
</body>
</html>
